<template>
  <div>
    <div id="map" style="width:2000px;height:1400px;" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      longitude: -33.55,
      latitude: 150.53
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let address = ''
      const that = this
      var center = new qq.maps.LatLng(this.longitude, this.latitude)
      var map = new qq.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 5,
        disableDefaultUI: true
      })
      var infoWin = new qq.maps.InfoWindow({
        map: map
      })
      var geocoder = new qq.maps.Geocoder({
        complete: function(res) {
          console.log(res)
          address = res.detail.nearPois[0].name
        }
      })
      qq.maps.event.addListener(map, 'click', function(event) {
        this.longitude = event.latLng.getLat()
        this.latitude = event.latLng.getLng()
        console.log(event)
        const lat = new qq.maps.LatLng(this.longitude, this.latitude)
        geocoder.getAddress(lat)
        setTimeout(() => {
          infoWin.open()
          infoWin.setContent(
            '<div style="text-align:center;white-space:nowrap;">' +
              address +
              '</div>'
          )
          infoWin.setPosition(event.latLng)
        }, 200)
      })
    }
  }
}
</script>
<style scoped>
</style>
